<template>
  <el-card class="box-card" style="line-height: 40px;height: 700px;overflow-y: auto">
    <div slot="header" class="clearfix">
      <span>请选择治疗项目</span>
    </div>
    <div v-for="(group,key,i) in items[$store.state.time]">
      <div class="groupName">{{group.name}}</div>
      <div>
        <el-table
          :data="group.data"
          stripe
          style="width: 100%">
          <el-table-column
            prop="q"
            label="项目"
            width="300">
          </el-table-column>
          <el-table-column
            width="100" label="操作">
            <template slot-scope="scope">
              <el-button @click="push(key,scope.$index)" type="primary" size="small" :disabled="scope.row.selected">添加</el-button>
            </template>
          </el-table-column>
          <el-table-column
            width="100">
            <template slot-scope="scope">
              <el-button @click="pop(key,scope.$index)"  type="warning" size="small" :disabled="!scope.row.selected">删除</el-button>
            </template>
          </el-table-column>

        </el-table>
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  name: "Therapies",
  props: {
    items: Array,
  },
  methods:{
    push(name,index){
      this.items[this.$store.state.time][name].data[index].selected = true
      this.$store.commit('theraphyPush',this.items[this.$store.state.time][name].data[index])
    },
    pop(name,index){
      this.$store.commit('theraphyPop',this.items[this.$store.state.time][name].data[index])
      this.items[this.$store.state.time][name].data[index].selected = false
    }

  }
}
</script>

<style scoped>
.groupName{
  font-size: 12px;
  color: gray;
}
</style>
